<template>
  <div class="box">
    <div class="top">开通快捷支付</div>
    <div class="bankdata">
      <a-form-item
        style="font-size:16px;flex:1;"
        label="账户名称"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15,offset:1 }"
      >{{username}}</a-form-item>
      <a-form-item
        style="font-size:16px;flex:1;"
        label="卡号"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15,offset:1 }"
      >{{bankcardno}}</a-form-item>
      <a-form-item
        style="font-size:16px;flex:1;"
        label="开户行"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15,offset:1 }"
      >{{bankname}}</a-form-item>
      <a-form-item
        style="font-size:16px;flex:1;"
        label="卡类型"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15,offset:1 }"
      >{{banktype}}</a-form-item>
      <a-form-item
        style="font-size:16px;flex:1;"
        label="开户行所在地"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15,offset:1 }"
      >{{province}}/{{city}}</a-form-item>
      <a-form-item
        style="font-size:16px;flex:1;"
        label="支行名称"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15,offset:1 }"
      >{{SubBranch}}</a-form-item>
      <a-form-item
        style="font-size:16px;flex:1;"
        label="开户手机号"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 15,offset:1 }"
      >{{bankphone}}</a-form-item>
    </div>
    <div class="agreement">
      <p :style="{ marginBottom: '20px' }">
        <a-checkbox @change="onChange">
          我已阅读并同意
          <a href=" " target="view_window">《快捷支付协议》</a>
        </a-checkbox>
      </p>
      <p>
        <a-button type="primary" :disabled="disabled" size="large" @click="opencode">下一步</a-button>
      </p>
    </div>
    <div v-if="codedisabled==1" class="codebox">
      <a-form :form="form" @submit="handleSubmit">
        <div class="center">我们已向您填写的手机号{{bankphone}}发送了一条验证码，请查收后填写</div>
        <div style=" margin-top: 50px;">
          <a-form-item
            style="font-size:16px;flex:1;"
            label="验证码"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15,offset:1 }"
          >
            <a-input
              style="width:300px"
              placeholder="请输入短信验证码"
              v-decorator="[
                        'VerCode',
                        {
                            rules: [{
                            required: true, message: '请输入短信验证码',
                            },{validator: validateverCode}],validateTrigger: 'blur'
                        }
                        ]"
            />
          </a-form-item>
        </div>
        <div style="margin-top: 50px;width: 140px;margin: 0 auto;">
          <a-button type="primary" html-type="submit">下一步</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      bankcardno: "",
      bankname: "",
      banktype: "",
      province: "省",
      city: "市",
      SubBranch: "",
      bankphone: "",
      disabled: true,
      codedisabled: 0,
      form: this.$form.createForm(this),
      bankCardDTOdata: []
    };
  },
  created() {
    this.getparams();
  },
  methods: {
    getparams() {
      this.bankCardDTOdata = this.$route.params.bankCardDTOdata;
      console.log(this.bankCardDTOdata);

      this.username = this.bankCardDTOdata.accountName;
      this.bankcardno = this.bankCardDTOdata.cardNo;
      this.bankname = this.bankCardDTOdata.bankName;
      this.province = this.bankCardDTOdata.province;
      this.city = this.bankCardDTOdata.city;
      this.SubBranch = this.bankCardDTOdata.bankBranchName;
      this.bankphone = this.bankCardDTOdata.mobileNo;
      if ((this.bankCardDTOdata.cardType = "D")) {
        this.banktype = "储蓄卡";
      }
    },

    onChange() {
      if (this.disabled == false) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    opencode() {
      console.log(this.bankCardDTOdata.accountNo);
      this.$axios
        .post("/agent/recharge/open/fastPayment", {
          accountNo: this.bankCardDTOdata.accountNo
        })
        .then(res => {
          console.log(res);
          if (res.data.code == "OK") {
            this.codedisabled = 1;
          }
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$axios
            .post("/agent/recharge/open/fastPayment/verify", {
              accountNo: this.bankCardDTOdata.accountNo,
              code: values.VerCode
            })
            .then(res => {
              console.log(res.data.code);
              if ((res.data.code = "OK")) {
                //  this.$message.success('开通成功');
                this.$router.push({
                  name: "开通快捷支付成功",
                  params: {
                    isok: true
                  }
                });
              } else {
                this.$router.push({
                  name: "开通快捷支付成功",
                  params: {
                    isok: false
                  }
                });
              }
            });
        }
      });
    },
    validateverCode(rule, value, callback) {
      const reg = new RegExp("^[0-9]{4,10}$");
      if (value && !reg.test(value)) {
        callback("您输入的验证码格式有误！");
      } else {
        this.verCode = value;
      }
      callback();
    }
  }
};
</script>

<style>
.box {
  position: relative;
}
.top {
  margin-top: 50px;
  margin-left: 150px;
  width: 100%;
  height: 70px;
  font-size: 20px;
  font-weight: bolder;
}
.agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.codebox {
  width: 100%;
  height: 100%;
  margin-top: -600px;
  background-color: white;
  position: absolute;
}
.center {
  width: 600px;
  font-size: 18px;
  margin: 0 auto;
  font-weight: bolder;
  margin-top: 100px;
}
</style>